
var vm = new Vue({
		el:'.page',
		data:{
			//是否邮寄
			selMail:false,
			message:{
				//经办人证件
				//正面
				agent_idcard_picf:'',
				//反面
				agent_idcard_picb:'',
				
				//营销人员编码
				oper:'',
				
				
				//代办人姓名
				agent_name:'',
				//手机
				agent_mobile:'',
				//电话
				agent_tel:'',
				//代办人证件类型
				agent_id_type:'1',
				//证件号码
				agent_idno:'',
				
				//企业证件
				//正面
				company_idcard_pic_url1:'',
				//反面
				auth_pic_url:'',
				
				//统一社会信用代码
				cmp_id:'',
				//企业名称
				cmp_name:'',
				//经营场所
				cmp_address:'',
				//法人代表
				cmp_organ:'',
				//成立日期
				cmp_createdate:"",
				//注册资金
				cmp_registered_capital:'',
				//电子邮箱
				email:'',
				//邮政编码
				zipcode:'',
				//单位联系电话
				cmp_tel:'',
				//车牌号
				car_no:'',
				//行驶证
				//正面
				veh_license_picf:'',
				//反面
				veh_license_picb:'',
				
				//车主姓名
				owner:'',
				//车辆类型
				vehicle_type:'1',
				//轴数
				vehicle_axles:'',
				//轮数
				vehicle_wheels:'',
				//车型
				vehicle_txtclass:'',
				//车牌颜色
				color:'0',
				//使用性质
				func_type:'',
				//厂牌型号
				factory_code:'',
				//座位数
				approved_count:'',
				//发动机号
				engine_code:'',
				//车辆识别号
				vehicle_code:'',
				//车辆行驶证地址
				vehicle_info_address:'',
				//注册日期
				register_date:'',
				//发证日期
				issue_date:'',
				//车辆长
				vehicle_length:'',
				//车辆宽
				vehicle_width:'',
				//车辆高
				vehicle_height:'',
				
				//是否邮寄
				whether_mail:'1',
				//收货地址-省
				addr_province:'',
				//市
				addr_city:'',
				//区
				addr_district:'',
				//详细地址
				addr_address:'',
				//收货人
				addr_consignee_name:'',
				//收货电话
				addr_tel:'',
				//收货手机号
				addr_con_mobilephone:'',
				//收货电子邮箱
				addr_email:'',
				//发票抬头
				invoice_title_id:'',
				//发票用户类型
				invo_user_type:'',
				//姓名
				invo_name:'',
				//纳税人识别号
				invo_tax_num:'',
				//地址
				invo_address:'',
				//联系电话
				invo_tel:'',
				//银行名称
				invo_bank:'',
				//银行账号
				invo_bank_account:''
			}
	},
	created(){
	},
	methods:{
		change(self,str){
			var that = this;
			self = self.target
		    //上传图片之后的对象数组；（如果后台约定直接通过formData上传，直接上传这里面的对象就好了，可以自行百度）
		    //创建一个读取文件的对象
		    let reader = new FileReader();
		    //读取文件，转码
		    reader.readAsDataURL(self.files[0]);
		    reader.onload = function (e) {
		        let base64 = e.target.result; //转码过后的base64编码
		        console.log("压缩前", base64.length / 1024);
		        //创建一个图片
		        let newImage = new Image();
		        let quality = 0.6;    //压缩系数0-1之间，压缩到0.9以上会有bug，注意！（可以自行设置）
		        newImage.src = base64;
		        newImage.setAttribute("crossOrigin", 'Anonymous');	//url为外域时需要
		        let imgWidth, imgHeight;
		        console.log("图片开始加载")
		        newImage.onload = function () {
		            	console.log("图片加载完成")
		        	
		            imgWidth = this.width;
		            imgHeight = this.height;
		            //给生成图片设置一个默认的最大宽/高（可以自行设置）
		            let myWidth = 800;
		            //准备在画布上绘制图片
		            let canvas = document.createElement("canvas");
		            let ctx = canvas.getContext("2d");
		            //判断上传的图片的宽高是否超过设置的默认最大值，以及设置同比例的宽高
		            if (Math.max(imgWidth, imgHeight) > myWidth) {
		                if (imgWidth > imgHeight) {
		                    canvas.width = myWidth;
		                    canvas.height = myWidth * imgHeight / imgWidth;
		                } else {
		                    canvas.height = myWidth;
		                    canvas.width = myWidth * imgWidth / imgHeight;
		                }
		            } else {
		            	
		                canvas.width = imgWidth;
		                canvas.height = imgHeight;
		            }
		            //清空画布
		            ctx.clearRect(0, 0, canvas.width, canvas.height);
		            //开始绘制图片到画布上
		                ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
		 
		                let newBase64 = canvas.toDataURL("image/jpeg", quality);//压缩图片大小（关键代码）
		            // 获取到当前的图片的大小，然后调整成自己需要的大小，例如说需要200KB-500KB之间（可以自行设置）
		            while (newBase64.length / 1024 > 200) {
		                quality -= 0.2;
		                newBase64 = canvas.toDataURL("image/jpeg", quality);
		            }
		            that.message[str] = newBase64;
		            that.callback(self,str);
		        }
		        
		    };
		},
		
		callback(self,str){
			let arr = self.parentNode.children;
			for(let i=0;i<arr.length;i++){
				arr[i].style.display = 'none';
			}
			self.parentNode.style.backgroundImage = "url("+this.message[str]+")";
			if(str == "agent_idcard_picb"){
				this.submitImg("1",this.message.agent_idcard_picf,this.message.agent_idcard_picb)
			}
			else if(str == 'auth_pic_url'){
				this.submitImg("2",this.message.company_idcard_pic_url1,this.message.auth_pic_url)
			}
			else if(str == 'veh_license_picb'){
				this.submitImg("3",this.message.veh_license_picf,this.message.veh_license_picb)
			}
		},
		submit(){
			var obj = {
				"header":{},
				"body":this.message
			}
			
			$.ajax({
				type:"post",
				url:"http://192.168.8.126:8082/etc-g/restfull/officialsop/KINGWORKS_001_001_008",
				async:true,
				dataType:"json",
				data:{
					"reqJson":JSON.stringify(obj)
				},
				success:(res)=>{
					console.log(res);
				},
				error:(err)=>{
					console.log(err);
				}
			});

			
		},
		submitImg(type,url_1,url_2){
			/**
			 * ocr
			 * */

			var obj = {
				"header":{},
				"body":{
					"pic_type":type,
					"pic_urlf":url_1,
					"pic_urlb":url_2
				}
			}
			
			$.ajax({
				type:"post",
				url:"http://192.168.8.126:8082/etc-g/restfull/officialsop/KINGWORKS_001_001_009",
				async:true,
				data:{
					"reqJson":JSON.stringify(obj)
				},
				success:(res)=>{
					console.log(res);
				},
				error:(err)=>{
					console.log(err);
				}
			});
			
			
			
		}

	}
})

let that = this;
	


function btn(){
	
	//页面切换
	
	let pageArr = ['.pageIndex','.pageEnterprise','.pageVehicle','.pageSupplement','.pageMail','.pageInvoice']
	let backArr = document.querySelectorAll(".back");
	let prevArr = document.querySelectorAll(".prev");
	let nextArr = document.querySelectorAll(".next");
	for(let i=0;i<backArr.length;i++){
		backArr[i].addEventListener("click",()=>{
			for(let j=0;j<pageArr.length;j++){
				document.querySelector(pageArr[j]).style.display = "none";
			}
			document.querySelector(pageArr[i]).style.display = "block";
		})
	}
	for(let i=0;i<prevArr.length;i++){
		prevArr[i].addEventListener("click",()=>{
			for(let j=0;j<pageArr.length;j++){
				document.querySelector(pageArr[j]).style.display = "none";
			}
			document.querySelector(pageArr[i]).style.display = "block";
		})
	}
	for(let i=0;i<nextArr.length;i++){
		nextArr[i].addEventListener("click",()=>{
			let iptArr = nextArr[i].parentNode.querySelectorAll(".Must");
			let isNext = true;
			if(iptArr.length == 0){
				iptArr = nextArr[i].parentNode.parentNode.querySelectorAll(".Must");
			}
			for(let j=0;j<iptArr.length;j++){
				if(iptArr[j].value == ''){
					isNext = false;
				}
			}
			if(isNext){
				for(let j=0;j<pageArr.length;j++){
					document.querySelector(pageArr[j]).style.display = "none";
				}
				document.querySelector(pageArr[i+1]).style.display = "block";
			}
			else{
				alert("必填信息未填写完成");
			}
		})
	}
	
	//返回上一页
	
	var  backPage = document.querySelector(".backPage");
	backPage.addEventListener("click",()=>{
		window.history.go(-1);
	})
	
	//提交成功确认
	var determine = document.querySelector(".determine");
	determine.addEventListener("click",()=>{
		document.querySelector(".success").style.display = "none";
	})
	
	//选择证件类型
	
	var selIdBtn = document.querySelector(".selIdBtn"); 
	var selID = document.querySelector(".selID");
	selIdBtn.addEventListener("click",()=>{
		selID.style.display = "block";
	})
	selID.addEventListener("click",()=>{
		selID.style.display = "none";
	})
	selID.querySelector(".selIDcancel").addEventListener("click",()=>{
		selID.style.display = "none";
	})
	var selIdArr = selID.querySelectorAll("li");
	for(let i=0;i<selIdArr.length;i++){
		selIdArr[i].addEventListener("click",(e)=>{
			vm.message.agent_id_type = e.target.dataset.type;
			
			selIdBtn.querySelector("input").value = selIdArr[i].innerText;
			selID.style.display = "none";
		})
	}
	
	
	//选择车牌颜色
	var licensePlateArr = document.querySelectorAll(".selColor div");
	for(let i=0;i<licensePlateArr.length;i++){
		licensePlateArr[i].addEventListener("click",()=>{
			for(let j=0;j<licensePlateArr.length;j++){
				var arr = licensePlateArr[j].querySelectorAll("img");
				arr[arr.length-1].style.display = "none";
			}
			var arr = licensePlateArr[i].querySelectorAll("img");
			arr[arr.length-1].style.display = "block";
		})
	}
	
	
	//选择车辆类型
	var selVehicleBtn = document.querySelector(".selVehicleBtn"); 
	var selVehicle = document.querySelector(".selVehicle");
	selVehicleBtn.addEventListener("click",()=>{
		selVehicle.style.display = "block";
	})
	selVehicle.addEventListener("click",()=>{
		selVehicle.style.display = "none";
	})
	selVehicle.querySelector(".selVehiclecancel").addEventListener("click",()=>{
		selVehicle.style.display = "none";
	})
	var selVehicleArr = selVehicle.querySelectorAll("li");
	for(let i=0;i<selVehicleArr.length;i++){
		selVehicleArr[i].addEventListener("click",(e)=>{
			vm.message.vehicle_type = e.target.dataset.type;
			selVehicleBtn.querySelector("input").value = selVehicleArr[i].innerText;
			selVehicle.style.display = "none";
		})
	}
	
}
btn();